<template>
	<!-- 遮罩层 -->
	<view class="mask" v-if="specFlag">
		<!-- 商品信息 -->
		<view class="goodsMessage">
			<!-- 商品 -->
			<view class="message">
				<image :src="buySpecData.goods_image || specGood.goods_master_image" mode=""></image>
				<view>
					<view>￥<text>{{ buySpecData.goods_price || specGood.goods_price }}</text></view>
					<view>库存{{ buySpecData.goods_stock || specGood.goods_stock }}</view>
					<view v-if="buySpecData">{{ buySpecData.sku_name }}</view>
				</view>
			</view>
			<!-- 版本 -->
			<view class="banben" v-if="attrList" v-for="(item, index) in attrList" :key="index">
				<view class="title">{{ item.name }}</view>
				<view class="spec">
					<!-- <view class="active">新版</view> -->
					<view v-for="(item1, index1) in item.specs" :class="item1.id == specObj[index] ? 'active' : ''" @click="choseSpec(index, item1.id)">{{ item1.name }}</view>
					<!-- <view>旧版旧版旧版</view>
					<view>旧版</view>
					<view>旧版旧版旧版</view>
					<view>旧版</view> -->
				</view>
			</view>
			<!--  购买数量 -->
			<view class="buyNum">
				<view class="left">购买数量</view>
				<view class="num">
					<view class="jian" @click="jian"><view></view></view>
					<view class="shuliang"><input type="num" maxlength='2' v-model="buyNum" value="" /></view>
					<view class="jia" @click="jia">
						<view></view>
						<view></view>
					</view>
				</view>
			</view>
			<!--  确定按钮 -->
			<view class="confirmBtn" @click="ok">
				确定
			</view>
			<!--  关闭按钮 -->
			<image class="close_pop" @click="closePop" src="https://community.chuangxiangdianli.com/images/goodsDetail/close_pop.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default{
		props: ['specFlag', 'attrList', 'specObj', 'buySpecData', 'specGood'],
		data() {
			return {
				specId: '',
				buyNum: 1
			}
		},
		methods:{
			// 点选择规格
			choseSpec(index, id) {
				this.$emit('changeSpec', index, id)
				this.$emit('changeSpecName')
				this.$forceUpdate()
			},
			//  关闭弹出层
			closePop() {
				// console.log('点击关闭弹出层！');
				this.$emit('closeSpec')
			},
			// 数量加
			jia() {
				if (this.buyNum < 99) {
					this.buyNum++
				} else {
					uni.showToast({
						title: '超出最大购买数量',
						icon: 'none'
					})
				}
				// this.$emit('jia')
			},
			// 数量减
			jian() {
				if (this.buyNum > 1) {
					this.buyNum--
				} 
			},
			ok() {
				this.$emit('handleSonOk', this.buyNum)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask{
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0,0,0, .6);
		z-index: 101;
		.goodsMessage{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			padding: 16rpx 30rpx 41rpx 30rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			.close_pop{
				position: absolute;
				right: 25rpx;
				top: 25rpx;
				width: 44rpx;
				height: 44rpx;
			}
			.message{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				width: 100%;
				&>image{
					display: block;
					height: 229rpx;
					width: 201rpx;
					margin-left: 10rpx;
					margin-right: 20rpx;
				}
				&>view{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: flex-start;
					&>view:nth-child(1){
						margin: 10rpx 0;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #FF433C;
						&>text{
							font-size: 32rpx;
						}
					}
					&>view:nth-child(2){
						margin: 10rpx 0;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #C2BEBD;
					}
					&>view:nth-child(3){
						margin: 10rpx 0;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #202020;
					}
				}
			}
			.banben{
				width: 100%;
				padding: 30rpx 0;
				box-sizing: border-box;
				
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #242424;
				border-bottom: 2rpx solid rgba(246, 246, 247, 1);
				.title{
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				.spec{
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					flex-wrap: wrap;
					&>view{
						height: 72rpx;
						line-height: 32rpx;
						background-color: rgba(241, 241, 241, 1);
						border-radius: 14rpx;
						padding: 21rpx 30rpx;
						box-sizing: border-box;
						margin-right: 21rpx;
						margin-bottom: 10rpx;
					}
					.active{
						background-color: #fff;
						border: 2rpx solid #34C39E;
						color: rgba(52, 195, 158, 1);
					}
				}
			}
			.buyNum{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				padding: 26rpx 0;
				box-sizing: border-box;
				border-bottom: 2rpx solid rgba(246, 246, 247, 1);
				margin-bottom: 30rpx;
				.left{
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #242424;
					line-height: 32rpx;
				}
				.num{
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;
					.jian{
						position: relative;
						height: 100%;
						width: 35rpx;
						&>view{
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							right: 0;
							margin: auto;
							width: 100%;
							height: 5rpx;
							background-color: #000000;
							border-radius: 2rpx;
						}
					}
					.shuliang{
						height: 100%;
						width: 70rpx;
						background-color: rgba(241, 241, 241, 1);
						border-radius: 10rpx;
						text-align: center;
						line-height: 52rpx;
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #242424;
						margin: 0 30rpx;
					}
					.jia{
						position: relative;
						width: 35rpx;
						height: 100%;
						// &>view{
							
						// }
						&>view:nth-child(1){
							position: absolute;
							left: 0;
							top: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							border-radius: 2rpx;
							background-color: #000000;
							height: 5rpx;
							width: 35rpx;
						}
						&>view:nth-child(2){
							position: absolute;
							left: 0;
							top: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							border-radius: 2rpx;
							background-color: #000000;
							height: 35rpx;
							width: 5rpx;
						}
					}
				}
			}
			.confirmBtn{
				margin: 0 28rpx;
				height: 90rpx;
				background: linear-gradient(90deg, #FF6B4D, #FC3629);
				border-radius: 45rpx;
				text-align: center;
				line-height: 90rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>
